{% extends 'base.html' %}
{% load i18n %}

{% block title %}{% trans 'Network' %}{% endblock %}

{% block head %}
  <link href="{{ STATIC_URL }}css/network.css" rel="stylesheet">
{% endblock head %}

{% block main %}
  <div class="page-header">
    <h1>Network</h1>
  </div>
  <div class="users">
    <div class="row">
      {% for user in users %}
        <div class="col-md-4">
          <div class="panel panel-default">
            <div class="panel-heading">
              <img src="{{ user.profile.get_picture }}" style="width:20px">
              <a href="{% url 'profile' user.username %}">{{ user.profile.get_screen_name }}</a>
            </div>
            <div class="panel-body">
              {% if user.profile.job_title %}
                <p><strong>{% trans 'Job Title' %}:</strong> {{ user.profile.job_title }}</p>
              {% endif %}
              <p><strong>{% trans 'Username' %}: </strong> {{ user.username }}</p>
              <p><strong>{% trans 'Email' %}:</strong> {{ user.email }}</p>
              {% if user.profile.location %}
                <p><strong>{% trans 'Location' %}:</strong> {{ user.profile.location }}</p>
              {% endif %}
              {% if user.profile.url %}
                <p><strong>{% trans 'Url' %}:</strong> {{ user.profile.get_url }}</p>
              {% endif %}
            </div>
          </div>
        </div>
        {% if forloop.counter|divisibleby:3 %}</div><div class="row">{% endif %}
      {% endfor %}
    </div>
  </div>
{% endblock main %}
